<template>  
  <div class="cart">
    <el-empty description="空空如也,快去选购吧" v-if="goods==null"></el-empty>
    <el-card class="box-card" v-else>
      <el-row style="height: 840px;">
        <el-tooltip effect="dark" placement="right" v-for="item in goods" :key="item.id">
          <el-card style="width: 135px;margin-bottom: 20px;height: 233px;float: left;margin-right: 15px" class="book"
            bodyStyle="padding:10px" shadow="hover">
            <router-link :to="{path:'/goodsDetail',query:{id:item.id}}">
              <div class="cover">
                <img :src="item.photo" alt="图片">
              </div>
            </router-link>
            <div class="info">
              <div class="title">
                <a href="">{{item.goodsName}}</a>
              </div>
            </div>
            <div class="author">{{item.price}}</div>
          </el-card>
        </el-tooltip>
      </el-row>
      <el-row>
        <el-pagination :current-page="1" :page-size="10" :total="20">
        </el-pagination>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'Goods',
    data() {
      return {
        goods: []
      }
    },
    mounted: function() {
      this.loadGoods()
    },
    methods: {
      loadGoods() {
        this.$axios.get('/getCart').then(resp => {
          this.goods = resp.data
        })
      }
    }
  }
</script>

<style scoped>
  .cover {
    width: 115px;
    height: 172px;
    margin-bottom: 7px;
    overflow: hidden;
    cursor: pointer;
  }

  img {
    width: 115px;
    height: 172px;
    /*margin: 0 auto;*/
  }

  .title {
    font-size: 14px;
    text-align: left;
  }

  .author {
    color: #333;
    width: 102px;
    font-size: 13px;
    margin-bottom: 6px;
    text-align: left;
  }

  .abstract {
    display: block;
    line-height: 17px;
  }

  a {
    text-decoration: none;
  }

  a:link,
  a:visited,
  a:focus {
    color: #3377aa;
  }

  .box-card {
    width: 60%px;
  }

  .cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
